import React from 'react'
import {DropTarget} from "react-dnd";

const dropSpec = {
  drop(props, monitor) {
    return {
      index: props.index,
      type: props.type
    }
  }
}

const dropCollect = (connect) => {
  return {
    connectDropTarget: connect.dropTarget()
  }
}

function cell(props) {
  return (
    props.connectDropTarget(
      <div style={{width: '100%', height: '100%', background: props.isDragging ? '#F00' : '#f0f2f5'}}>
        {props.children}
      </div>
    )
  )
}

const DropNode = DropTarget('li', dropSpec, dropCollect)(cell)

export default DropNode

/*export default (props) =>
  <div style={{width: '100%', height: '100%', background: props.isDragging ? '#F00' : '#EEE'}}>
    {props.children}
  </div>*/
